﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>面板样式</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>默认方案</h5>
			<p>
				<div class="panel">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>尺寸方案</h5>
			<p>
				<div class="panel sm">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel lg">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>颜色样式</h5>
			<p>
				<div class="panel c-grey">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-dark">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-blue">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-orange">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-green">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-red">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-yellow">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-teal">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-violet">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-purple">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-pink">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel c-brown">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>带有工具条的面板</h5>
			<p>
				<div class="panel">
					<div class="panel-header">
						<div class="panel-title">标题</div>
						<div class="panel-tools">
							<div class="group">
								<a class="btn btn-solid c-blue">工</a>
								<a class="btn btn-solid c-blue">具</a>
								<a class="btn btn-solid c-blue">条</a>
							</div>
						</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>方角面板</h5>
			<p>
				<div class="panel square">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>多个主体的面板</h5>
			<p>
				<div class="panel">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<hr class="hr" />

			<h5>表格面板</h5>
			<p>
				<div class="panel">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>

					<table class="table">
						<thead>
							<tr>
								<th>表格页头</th>
								<th>表格页头</th>
								<th>表格页头</th>
								<th>表格页头</th>
								<th>表格页头</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td>单元格</td>
								<td>单元格</td>
								<td>单元格</td>
								<td>单元格</td>
								<td>单元格</td>
							</tr>
						</tbody>
						<tfoot>
							<tr>
								<td>表格页脚</td>
								<td>表格页脚</td>
								<td>表格页脚</td>
								<td>表格页脚</td>
								<td>表格页脚</td>
							</tr>
						</tfoot>
					</table>
					
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>

			<h5>Import样式</h5>
			<p>
				<div class="panel panel-import">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-grey">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-dark">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-blue">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-orange">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-green">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-red">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-yellow">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-teal">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-violet">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-purple">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-pink">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
				<hr class="hr hr-dotted" />
				<div class="panel panel-import c-brown">
					<div class="panel-header">
						<div class="panel-title">标题</div>
					</div>
					<div class="panel-body">
						面板主体
					</div>
					<div class="panel-footer">
						面板底部
					</div>
				</div>
			</p>
		</div>
	</fieldset>

</body>
</html>
